<template>
  <div>
    <div class="editBox">
      <p>订单编辑</p>
      <div class="EditInfo">
        <label for="">
          <div>订单号：{{ route.query.orderNo }}<br /></div>
          <div>下单时间：{{ date1 }}<br /></div>
          <div>
            <span style="color: red">*</span>手机号：<input
              type="text"
              v-model="route.query.phone"
            /><br />
          </div>
          <div>
            <span style="color: red">*</span>收货人：<input
              type="text"
              v-model="route.query.consignee"
            /><br />
          </div>
          <div>
            <span style="color: red">*</span>配送地址：<input
              type="text"
              v-model="route.query.deliverAddress"
            /><br />
          </div>
          送达时间：{{ date2 }}<br />
          <div>
            <span style="color: red">*</span>用户备注：<input
              type="text"
              v-model="route.query.remarks"
            /><br />
          </div>
          订单金额：{{ route.query.orderAmount }}<br />
          <el-button type="primary" @click="handleEdit"> 确定修改 </el-button>
        </label>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import moment from 'moment'
import { fetchOrderEdit } from '../api/lists/index'
import { onMounted } from 'vue'
import router from '@/router';
const route = useRoute()
const date1 = moment(route.query.orderTime).format('YYYY-MM-DD HH:mm:ss')
const date2 = moment(route.query.deliveryTime).format('YYYY-MM-DD HH:mm:ss')

const handleEdit = async() => {
  const data ={
    id: parseInt(route.query.id),
    orderNo: route.query.orderNo,
    orderTime:date1,
    phone: route.query.phone,
    consignee: route.query.consignee,
    deliverAddress: route.query.deliverAddress,
    deliveryTime: date2,
    remarks: route.query.remarks,
    orderAmount: route.query.orderAmount,
    orderState: route.query.orderState,
  }
  const res = await fetchOrderEdit(data)
  if(res.code === 0){
    router.replace({
      path:'/index/order'
    })
  }
}
</script>

<style scoped>
.editBox {
  padding: 20px;
  width: 90%;
  height: 600px;
  box-shadow: 0px 1px 9px 1px rgb(205, 202, 202);
  p {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid;
    margin-bottom: 20px;
  }
  .EditInfo {
    width: 100%;
    height: 90%;
    label {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }
    button {
      width: 100px;
    }
    input {
      width: 80%;
      height: 40px;
      border-radius: 5px;
      border-color: azure;
    }
  }
}
</style>
